<template>
  <Header></Header>
  <div class="product-detail">
    <div class="wp-title_content"
         style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 48px; width: 134px; display: block;margin-top: 20px">
      <div class="circle" style="float: left">FD</div>
      <p>
    <span
        style="color: rgb(242, 89, 75); font-family: Microsoft YaHei; font-size: 20px; line-height: 140%;">鲜花详情</span>
      </p >
      <p>
    <span
        style="color: rgb(102, 102, 102); font-family: Microsoft YaHei; font-size: 10px; letter-spacing: 0px; line-height: 140%;">
    FLOWER DETAIL
    </span><br></p >
    </div>
    <div class="product-head">{{ data.product.flowerName }}</div>
    <div class="product-description">{{ data.product.flowerLanguage }}</div>
    <div class="product-mai">
      <div class="product-img">
        <img :src="data.product.imageUrl" alt="Product Image">
      </div>
      <div class="product-font">
        <p>「编&nbsp;&nbsp;&nbsp;&nbsp;号」&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ data.product.flowerId }}</p>
        <p>「名&nbsp;&nbsp;&nbsp;&nbsp;称」&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ data.product.flowerName }}</p>
        <p>「单&nbsp;&nbsp;&nbsp;&nbsp;价」&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ data.product.price }}元</p>
        <p>「详&nbsp;&nbsp;&nbsp;&nbsp;细」&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ data.product.description }}</p>
        <p>「购&nbsp;&nbsp;&nbsp;&nbsp;买」&nbsp;&nbsp;&nbsp;&nbsp;<el-input-number v-model="data.num"
                                                                                @change="handleChange" :min="1"
                                                                                label="描述文字"
                                                                                size="small"></el-input-number>
        </p>
        <p>「总金额&nbsp;」&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ data.price }}元</p>
      </div>
      <div class="product-button">
        <el-button type="primary" plain @click="addToCart()" color="#626aef" style="width:100px;margin-right: 40px;">
          加入购物车
        </el-button>
        <router-link @click="sddToCart()" style="text-decoration: none;width: 100%"
                     :to="{ path: '/showcart', query: { product: '100086' } }">
          <el-button type="primary" color="#626aef" style="width:100px;">立即购买</el-button>
        </router-link>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {useRoute} from 'vue-router';
import {ShoppingCart} from '@element-plus/icons-vue';
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import request from "@/utils/request";
import router from "@/router";
import {ElMessage} from "element-plus";

const route = useRoute();
const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-pro-user')),
  product: {},
  num: 1,
  productId: route.params.id,
  price: 0,
  isLoggedIn: false,
  add: {
    itemId: "",
    userId: "",
    flowerId: '',
    quantity: '',
    price: '',
    checked: false,
    flowerName: '',
    imageUrl: '',
  },
})

request.get("/flower/flowerId", {
  params: {
    flowerId: data.productId
  }
}).then(res => {
  console.log(res)
  data.product = res.data
})

const handleChange = (value) => {
  data.num = value
  let price = parseFloat(data.product.price)
  let product = parseFloat(data.num)
  data.price = price * product
  console.log(data.num);
}

const addToCart = () => {
  if (data.isLoggedIn == false) {
    ElMessage.success("您还未登录，请先登录账号")
    setTimeout(() => {
      router.push('/login')
    }, 500)
  } else {
    data.add.userId = JSON.parse(localStorage.getItem('xm-pro-user')).id
    data.add.flowerId = data.productId
    data.add.quantity = data.num
    request.post("/shoppingcart", data.add).then(res => {
      if (res.code === '0') {
        ElMessage.success("添加成功")
        setTimeout(() => {
          window.location.reload();
        }, 500)
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
};

const sddToCart = () => {
  if (data.isLoggedIn == false) {
    ElMessage.success("您还未登录，请先登录账号")
      router.push('/login')
  } else {
    request.delete("/shoppingcart/delete", {
      params: {
        userId: 100086,
      }
    })
    setTimeout(() => {
      data.add.userId = 100086
      data.add.flowerId = data.productId
      data.add.quantity = data.num
      data.add.checked = true
      request.post("/shoppingcart", data.add).then(res => {
        if (res.code === '0') {
            window.location.reload();
        } else {
          ElMessage.error(res.msg)
        }
      })
    }, 500)
  }
}

setTimeout(() => {
  let price = parseFloat(data.product.price)
  let product = parseFloat(data.num)
  data.price = price * product
}, 500)

if (!localStorage.getItem('xm-pro-user')) {
  data.isLoggedIn = false;
} else if (localStorage.getItem('xm-pro-user')) {
  data.isLoggedIn = true;
}

</script>

<style scoped>
.product-detail {
  width: 60%;
  margin: 0 auto;
}

.circle {
  margin-top: 10px;
  margin-right: 5px;
  width: 30px;
  height: 30px;
  background-color: #ff6347;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  line-height: 180%;
  color: #FFFFFF;
  text-align: center;
}

.product-head {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-family: 新宋体;
}

.product-description {
  padding: 6px 6px 6px 20px;
  line-height: 1em;
  margin-bottom: 20px;
  background-color: #f3d8cf;
  border: #E5E5E5 1px solid;
  font-size: 12px;
}

.product-img {
  text-align: center;
}

.product-img img {
  width: 220px;
  height: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-font {
  font-size: 16px;
  color: #494848;
  margin: 60px 10px 30px;
}

.product-font p {
  margin-bottom: 7px;
}

.product-button {
  text-align: center;
  margin-top: 40px;
}

</style>